<div class="container">

	<div class="width300">
		<ul class="nav nav-tabs">
			<li role="presentation" ng-class="{active: listActive}"><a
				href="#/list">Bookmarks</a></li>
			<li role="presentation" ng-class="{active: bookmarkActive}"><a
				href="#/bookmark">Add a new Bookmark</a></li>
		</ul>
		<alert ng-repeat="message in messages" type="{{message.type}}"
			close="closeAlert($index)"> {{message.msg}} </alert>
	</div>

	<h4>Folders</h4>

	<div class="btn-group" role="group">
		<button type="button" ng-repeat="folder in folders" ng-class="{active: folder.name==folder"
			ng-click="getBookmarksInFolder(folder.name)" class="btn btn-default">
			{{ folder.name }} <span class="badge">{{folder.count}}</span>
		</button>
	</div>

	<h4 class="bkm-header" ng-show="bookmarks.length > 0">
		Bookmarks in [<span style="color: green">{{folder}}</span>]
	</h4>
	<!-- 	</div> -->

	<div ng-repeat="bookmark in bookmarks"
		class="panel panel-default bkmpanel">
		<div class="panel-heading">
			<strong>{{bookmark.name}}</strong>
		</div>
		<div class="panel-body">
			<a href={{bookmark.url}}>{{bookmark.url}}</a>
		</div>
		<div class="floated">
			<button ng-click="deleteBookmark(bookmark)" class="btn btn-danger btn-sm">Delete</button>
			<button ng-click="editBookmark(bookmark)" class="btn btn-info btn-sm">Edit</button>
		</div>


	</div>



</div>



